<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<!--<el-form-item>
					<el-date-picker type="datetime" placeholder="开始时间" v-model="filters.startTime" :picker-options="pickerBeginDateBefore"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-date-picker type="datetime" placeholder="结束时间" v-model="filters.endTime" :picker-options="pickerBeginDateAfter" ></el-date-picker>
				</el-form-item>-->
			    <el-form-item>
					<el-select v-model="filters.type" clearable placeholder="商城专区">
						<el-option v-for="item,index in shopTypeList" :label="item.name" :value="item.id" :key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<!--<el-form-item>
					<el-select v-model="filters.first" clearable placeholder="一级分类">
						<el-option v-for="item in firstType" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>-->
				<el-form-item>
					<el-input v-model="filters.name" placeholder="输入分类名称查找"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查找</el-button>
				</el-form-item>
				<!-- <el-form-item>
					<el-button type="primary" @click="handleDel" >删除</el-button>
				</el-form-item> -->
				<el-form-item>
					<el-button type="primary" @click="handleAdd" >新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;">
			<el-table-column type="selection" width="70" align="center">
			</el-table-column>
			<el-table-column prop="typeName" label="商城专区" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.typeName == 1">鸿福商城</span>
					<span v-if="scope.row.typeName == 2">积分商城</span>
					<span v-if="scope.row.typeName == 3">旅游专区</span>
					<span v-if="scope.row.typeName == 4">返利商城</span>
				</template>
			</el-table-column>
			<el-table-column prop="firstName" label="一级分类名称" align="center">
			</el-table-column>
			<el-table-column prop="secondName" label="二级分类名称" align="center">
			</el-table-column>
		<!--	<el-table-column prop="create_time" label="创建时间" align="center" :formatter="formatDateTime">
			</el-table-column>
			<el-table-column prop="last_edit_time" label="最后编辑时间" min-width="180" :formatter="formatDateTime" align="center">
			</el-table-column>-->
			<el-table-column label="操作" align="center" min-width="160">
				<template slot-scope="scope">
					<el-button v-if="scope.row.secondName == '' || scope.row.secondName == undefined || scope.row.secondName == null" size="small" @click="add(scope.$index, scope.row)">添加二级</el-button>
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
			<el-col :span="24" class="toolbar">
			<el-pagination
	          class="top"
	          @size-change="handleSizeChange"
	          @current-change="handleCurrentChange"
	          :current-page="currentPage"
	          :page-sizes="[10, 15, 20, 30]"
	          :page-size="pageSize"
	          layout="total, sizes, prev, pager, next, jumper"
	          :total='total'
	          style="float:right;">
	        </el-pagination>
		</el-col>
		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="商城专区">
					<el-select v-model="editForm.type" clearable placeholder="商城专区" disabled="disabled">
						<el-option v-for="item,index in shopTypeList" :label="item.name" :value="item.id" :key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="pd">
					<el-input v-model="editForm.input" placeholder="请输入分类名"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增分类" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="商城专区">
					<el-select v-model="addForm.type" clearable placeholder="请选择商城专区" @change="typeChange">
						<el-option v-for="item,index in shopTypeList" :label="item.name" :value="item.id" :key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<!--<el-form-item label="一级分类" v-for="item in addTypeList">
					<div style="display:flex" class="first_class">
						<el-input v-model="item.name" :value="item.name" placeholder="输入分类名称，不超过8个字" style="width:150px" :maxlength="8"></el-input>
						<div class="second_class">
							<div class="second_item" v-for="value in item.second">
								<span>二级分类</span>
								<el-input v-model="value.name" :value="value.name"  placeholder="输入分类名称，不超过8个字" style="width:150px" :maxlength="8"></el-input>
								<el-button type="primary" @click="add_addSecond(addTypeList.indexOf(item))" >新增二级</el-button>
								<el-button v-if="item.second.indexOf(value)>0" type="primary" @click="add_deleteSecond(addTypeList.indexOf(item),item.second.indexOf(value))" :loading="addLoading">删除</el-button>

							</div>
						</div>
					</div>
					<el-button type="primary" @click="add_addFirst()" >新增一级</el-button>
					<el-button v-if="addTypeList.indexOf(item)>0" type="primary" @click="add_deleteFirst(addTypeList.indexOf(item))" :loading="addLoading">删除</el-button>
				</el-form-item>-->
				<el-form-item label="一级分类">
					<el-input v-model="addForm.first" placeholder="请输入一级分类"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import { categoryList, addGoodsCategory, editGoodsCategory, deleteGoodsCategory,goodsCategoryList,getAllGoodsCategory } from '../../api/api';

	export default {
		data() {
			return {
				filters: {
					name: '',
					type: '',
					first: '',
					startTime: '',
					endTime: ''
				},
				pd: '修改一级分类名',
				pickerBeginDateBefore:{
		            disabledDate: (time) => {
		                let beginDateVal = this.filters.endTime;
		                if (beginDateVal) {
		                    return time.getTime() > beginDateVal;
		                }
		            }
		        },
		        pickerBeginDateAfter:{
		            disabledDate: (time) => {
		                let beginDateVal = this.filters.startTime;
		                if (beginDateVal) {
		                    return time.getTime() < beginDateVal;
		                }
		            }
		        },
		        firstType:[],
				secondType:[],
				shopTypeList:[{
					id:'1',
					name:'鸿福商城'
				},{
					id:'2',
					name:'积分商城'
				},{
					id:'3',
					name:'旅游专区'
				},{
					id:'4',
					name:'返利商城'
				}],
				users: [
				// {
				// 	typeName:"鸿福商城",
				// 	firstName:"健康养生",
				// 	secondName:"保健品",
				// 	create_time:"2017-10-10 10:10",
				// 	last_edit_time:"2017-10-10 11:11"
				// }
				],
				total: 0,
			page: 1,
			pageSize:10,
			currentPage:1,
				listLoading: false,
				sels: [],//列表选中列

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//编辑界面数据
				editForm: {
					id: 0,
					type:"",
					input: ''
				},
				editor: null,
				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
				
				},
				//新增界面数据
				addForm: {
					type:'',
					first: ''
				}

			}
		},
		methods: {
			formatDateTime: function (row, column){
				var date = row[column.property];
				if (date == undefined) {
		            return "";
		        }
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			changeToDateStr:function(date){
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getUsers();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers() {
				let para = {
					pageIndex: this.currentPage,
				    pageSize: this.pageSize,
					//startTime: this.filters.startTime,
					//endTime: this.filters.endTime,
					id:this.filters.first,
					name:this.filters.name,
					type:this.filters.type
				};
				/*if (!para.startTime || para.startTime=='') {
					para.startTime = null;
				}else{
					para.startTime = this.changeToDateStr(para.startTime);
				}
				if (!para.endTime || para.endTime=='') {
					para.endTime = null;
				}else{
					para.endTime = this.changeToDateStr(para.endTime);
				}*/
				categoryList(para).then((res) => {
					this.listLoading = false;
					if (res.code == 0) {
						this.users = res.data.data;
						this.total = res.data.totalCount
					}else{
						this.$message({
							message: res.message,
							type: 'error'
						});
					}
				});
			},
			//获取一级分类、二级分类
			getTypeList(id){
				let para = {
					categoryId:id
				}
				// if (id == 0) {
				// 	this.firstType = [{id:1,name:"一级1"},{id:2,name:"一级2"}];
				// }else{
				// 	this.secondType = [{id:1,name:"二级11"},{id:2,name:"二级22"}];
				// }
				console.log(para);
			/*	goodsCategoryList(para).then((res) => {
					console.log(res);
					if (res.code==0) {
						if (id == 0) {
							this.firstType = res.data;
						}else{
							this.secondType = res.data;
						}
					};
				});*/
			},
			//获取所有商品分类
			getAllCategory(type){
				let para = {type:type};
				/*getAllGoodsCategory(para).then((res) =>{
					console.log(res);
					if (res.code==0) {
						this.addTypeList = res.data.first;
						if (this.addTypeList.length == 0) {
							this.add_addFirst();
						};
					};
				});*/
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { ids: [row.id] };
					deleteGoodsCategory(para).then((res) => {
						this.listLoading = false;
						if (res.code == 0) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getUsers();
						}else{
							this.$message({
								message: res.message,
								type: 'error'
							});
						}
					});
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editor = Object.assign({}, row);
				this.shopTypeList.map((v,i) => {
					console.log(v)
					if(row.type == v.id) {
						this.editForm.type = v.name
					}
				})
				this.editFormVisible = true;
				/*var info = Object.assign({}, row);
						this.editForm.id = info.pId;
						this.editForm.type = info.typeName;
						this.editTypeList = [{name:info.firstName,second:[]}];
						
						goodsCategoryList({id:info.pId}).then((res) => {
							this.editFormVisible = true;
							res.data.forEach((v)=>{
								this.editTypeList[0].second.push({'id':v.id,'name':v.name});
							})
							
						});
				*/
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let para = {}
							if(this.editor.secondName == undefined || this.editor.secondName ==null || this.editor.secondName == '') {
								para.id = this.editor.id
								para.name = this.editForm.input
							} else {
								para.parentId = this.editor.parentId
								para.id = this.editor.id
								para.name = this.editForm.input
							}
							
							editGoodsCategory(para).then((res) => {
								this.editLoading = false;
								if (res.code == 0) {
									this.$message({
										message: '提交成功',
										type: 'success'
									});
									this.editFormVisible = false;
									this.getUsers();
								}else{
									this.$message({
										message: res.message,
										type: 'error'
									});
								}
							});
						});
					}
				});
			},
			//新增
			addSubmit() {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							let para = {}
							para.type = this.addForm.type
							para.name = this.addForm.first;
							para.parentId = 0
							addGoodsCategory(para).then((res) => {
								this.addLoading = false;
								if (res.code == 0) {
									this.$message({
										message: '提交成功',
										type: 'success'
									});
									this.addFormVisible = false;
									this.getUsers();
								}else{
									this.$message({
										message: res.message,
										type: 'error'
									});
								}
							});
						});
					}
				});
			},
			add(index,row) {
				let self = this
				this.$prompt('请输入二级分类', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({ value }) => {
					let para = {}
					para.type = row.type
					para.name = value
					para.parentId = row.id
					addGoodsCategory(para).then(res => {
						self.getUsers();
					})
					
					
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			typeChange() {
			
			},
		},
		mounted() {
			this.getUsers();
			this.getTypeList(0);
		}
	}

</script>

<style scoped>
.second_item{
	margin-left: 10px;
	margin-bottom: 10px;
}

</style>
